<template>
  <div class='container'>
    <el-dialog  v-if="isForm" :title="addTitle" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="handleClose" @open="dialogOpenFn">
      <el-form ref="dialogForm" :rules="rules" :model="dialogForm" label-width="80px">
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="dialogForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="editDialog">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog v-else :title="addTitle" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="handleClose" @open="dialogOpenFn">
      <el-form ref="dialogForm" :rules="rules" :model="dialogForm" label-width="80px">
        <el-form-item label="所属学科" prop="subjectName">
          <el-select v-model="dialogForm.subjectName" placeholder="请选择" style="width:100%;" >
          <el-option
          v-for="item in subjectNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="dialogForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="editDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { update, add } from '@/api/hmmm/tags.js'
import { subjectsSimpleApi, detail } from '@/api/hmmm/subjects.js'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    nodeDate: {
      type: Object,
      default: () => {}
    },
    addTitle: {
      type: String,
      default: ''
    },
    tableDataTwo: {
      type: Array,
      default: () => []
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isForm () {
      return this.$parent.isChildrenForm()
    }
  },
  data () {
    return {
      dialogForm: {
        subjectName: '',
        tagName: '',
        subjectID: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入所属学科', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur' }
        ]
      },
      subjectNameList: []
    }
  },
  created () {
    this.simpleList()
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('update:dialogVisible', false)
      this.$refs.dialogForm.resetFields()
    },
    // 添加/修改弹框
    editDialog () {
      if (this.addTitle === '修改弹框') {
        this.$refs.dialogForm.validate(valid => {
          if (valid) {
            if (this.$parent.isChildrenForm) {
              update({
                id: 16,
                subjectID: 16,
                tagName: this.dialogForm.tagName
              }).then(res => {
                this.$message.success('修改成功！,数据正在添加中')
                location.reload()
                this.handleClose()
                this.$parent.getTagsList()
              })
            } else {
              update({
                id: this.dialogForm.id,
                subjectID: this.dialogForm.subjectName,
                tagName: this.dialogForm.tagName
              }).then(res => {
                this.$message.success('修改成功！')
                this.handleClose()
                this.$parent.getTagsList()
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

      if (this.addTitle === '添加弹框') {
        this.$refs.dialogForm.validate(async valid => {
          if (valid) {
            await add({ subjectID: this.dialogForm.subjectName, tagName: this.dialogForm.tagName })
            this.$message.success('添加成功！')
            this.$parent.getTagsList()
            this.handleClose()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

      if (this.addTitle === '新增弹框') {
        this.$emit('update:isLoading', true)
        this.$refs.dialogForm.validate(async valid => {
          if (valid) {
            await add({ subjectName: '大数据', subjectID: 16, tagName: this.dialogForm.tagName })
            location.reload()
            this.handleClose()
            this.$message.success('添加成功,正在返回数据！')
          } else {
            console.log('error submit!!')
            return false
          }
        })
        this.$emit('update:isLoading', false)
      }
    },
    // 标签详情
    async dialogOpenFn () {
      console.log('子组件', this.uid)
      if (this.addTitle === '修改弹框') {
        const { data } = await detail(this.nodeDate)
        this.dialogForm = { ...data, ...this.nodeDate }
      }

      if (this.addTitle === '添加弹框') {
        this.dialogForm = {
          subjectName: '',
          tagName: ''
        }
        // this.$refs.dialogForm.resetFields()
      }
    },
    // 获取所属学科简单列表
    async simpleList () {
      const { data } = await subjectsSimpleApi()
      this.subjectNameList = data
    }
  }
}
</script>

<style scoped lang='scss'>
.el-select .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  width: 340.8px;
}
</style>
